import { useState, useRef, useEffect } from 'react'
import { NavBar, Toast, Button, Popup, Form, Input, Radio, DatePicker, Selector } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import styles from './Consultation.module.scss'
import { uploadToOSS, deleteFromOSS } from '../../utils/ossUpload'

/**
 * 快速问诊页面
 * 包含4个步骤：描述病情 -> 发送图片 -> 选择就诊人 -> 匹配医生
 */
const Index = () => {
  const navigate = useNavigate()

  // 表单数据状态
  const [formData, setFormData] = useState({
    symptomDescription: '',    // 步骤1：病情描述
    uploadedFiles: [] as string[],         // 步骤2：上传的图片
    selectedPatient: null as any,     // 步骤3：选择的患者
    selectedPackage: null as any,     // 步骤4：选择的套餐
    selectedDoctor: null as any       // 步骤4：选择的医生
  })

  // 历史病情记录
  const [historySymptoms, setHistorySymptoms] = useState<string[]>([])

  // 当前步骤状态
  const [currentStep, setCurrentStep] = useState(1) // 1: 描述病情, 2: 上传图片, 3: 选择就诊人, 4: 匹配医生

  /**
   * 从本地存储加载历史病情记录
   * 
   * 功能说明：
   * - 从 localStorage 中读取搜索页面的历史记录
   * - 如果读取失败或没有记录，则显示默认示例
   * - 确保问诊页面和搜索页面使用相同的历史记录数据
   * 
   * 数据来源：
   * - 优先使用 localStorage 中的 'searchHistory' 数据
   * - 如果数据不存在或解析失败，则使用默认示例
   */
  const loadHistorySymptoms = () => {
    try {
      // 从搜索页面的历史记录中加载数据
      const saved = localStorage.getItem('searchHistory')
      if (saved) {
        const history = JSON.parse(saved)
        setHistorySymptoms(history)
      } else {
        // 如果没有历史记录，设置一些默认示例（用于引导用户）
        const defaultHistory = [
          '我最近头痛想吐，流鼻涕，有痰',
          '肚子疼，拉肚子，可能是吃坏了东西',
          '咳嗽有痰，嗓子疼，已经三天了'
        ]
        setHistorySymptoms(defaultHistory)
      }
    } catch (error) {
      console.warn('加载历史病情失败:', error)
      // 出错时也设置默认历史记录，确保页面正常显示
      const defaultHistory = [
        '我最近头痛想吐，流鼻涕，有痰',
        '肚子疼，拉肚子，可能是吃坏了东西',
        '咳嗽有痰，嗓子疼，已经三天了'
      ]
      setHistorySymptoms(defaultHistory)
    }
  }




  /**
   * 添加新的病情描述到历史记录（使用搜索页面的历史记录）
   * 
   * 功能说明：
   * - 将用户输入的病情描述保存到历史记录中
   * - 只保留最新的一条记录，避免历史记录过多
   * - 与搜索页面共享同一个历史记录存储
   * 
   * @param description 用户输入的病情描述文本
   */
  const addToHistory = (description: string) => {
    // 检查输入内容是否有效（至少1个字符）
    if (description.trim().length >= 1) {
      // 只保留最新的一条记录：将新描述放在数组第一位，并限制数组长度为1
      const newHistory = [description].slice(0, 1) // 只保存1条记录
      setHistorySymptoms(newHistory)
      // 保存到搜索页面的历史记录中，确保两个页面数据同步
      localStorage.setItem('searchHistory', JSON.stringify(newHistory))
    }
  }

  // 组件挂载时加载历史记录
  useEffect(() => {
    loadHistorySymptoms()
  }, []) // 空依赖数组，只在组件挂载时执行一次


  // 模拟医生数据
  const mockDoctors = [
    {
      id: 1,
      name: '张医生',
      department: '内科',
      title: '主任医师',
      hospital: '北京协和医院',
      avatar: 'https://via.placeholder.com/50'
    },
    {
      id: 2,
      name: '李医生',
      department: '呼吸科',
      title: '副主任医师',
      hospital: '北京医院',
      avatar: 'https://via.placeholder.com/50'
    }
  ]


  // 步骤条组件
  const StepBar = () => {
    const steps = [
      { title: '描述病情', step: 1 },
      { title: '发送图片', step: 2 },
      { title: '选择就诊人', step: 3 },
      { title: '匹配医生', step: 4 }
    ]

    return (
      <div className={styles.stepBar}>
        {steps.map((step) => (
          <div 
            key={step.step} 
            className={`${styles.stepItem} ${currentStep === step.step ? styles.current : ''} ${currentStep > step.step ? styles.completed : ''}`}
          >
            <div className={styles.stepContent}>
              <div className={styles.stepTitle}>{step.title}</div>
            </div>
          </div>
        ))}
      </div>
    )
  }

  // 步骤1：描述病情
  const SymptomStep = () => {
    return (
      <div className={styles.stepContent}>
        {/* 医生助手对话 */}
        <div className={styles.chatArea}>
          <div className={styles.assistantMessage}>
            <div className={styles.avatar}>
              <div className={styles.avatarPlaceholder}>👩‍⚕️</div>
            </div>
            <div className={styles.messageBubble}>
              <div className={styles.messageText}>
                您好，我是医生助手，请在下方输入框详细描述病情，以便医生准确了解您的情况，快速接诊
              </div>
            </div>
          </div>
        </div>
        
        {/* 历史病情提示区域 - 显示用户之前输入过的病情描述 */}
        {historySymptoms.length > 0 && (
          <div className={styles.historyPrompt}>
            <div className={styles.historyTitle}>历史病情记录：</div>
            <div className={styles.historyList}>
              {/* 遍历历史记录，显示为可点击的选项 */}
              {historySymptoms.map((symptom, index) => (
                <div 
                  key={index} 
                  className={styles.historyItem}
                  onClick={() => {
                    // 点击历史记录项时，自动填充到输入框中
                    setFormData(prev => ({ ...prev, symptomDescription: symptom }))
                  }}
                >
                  {symptom}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    )
  }

  // 步骤2：上传图片
  const UploadStep = () => {
    if (currentStep !== 2) return null
    
    return (
      <div className={styles.stepContent}>
        {/* 医生助手对话 */}
        <div className={styles.chatArea}>
          <div className={styles.assistantMessage}>
            <div className={styles.avatar}>
              <div className={styles.avatarPlaceholder}>👩‍⚕️</div>
            </div>
            <div className={styles.messageBubble}>
              <div className={styles.messageText}>
                请上传患处、检查、病历等图片，仅您与医生可见
              </div>
            </div>
          </div>
          
          {/* 用户已输入的病情描述 */}
          <div className={styles.userMessage}>
            <div className={`${styles.messageBubble} ${styles.userBubble}`}>
              {formData.symptomDescription || '我头痛想吐，流鼻涕，有痰'}
            </div>
          </div>
        </div>
        
        {/* 已上传的图片显示区域 */}
        {formData.uploadedFiles.length > 0 && (
          <div className={styles.uploadedFiles}>
            <div className={styles.uploadedTitle}>已上传的图片：</div>
            <div className={styles.filesList}>
              {formData.uploadedFiles.map((_, index) => (
                <div key={index} className={styles.fileItem}>
                  <Button 
                    size="small" 
                    onClick={async () => {
                      try {
                        const fileUrl = formData.uploadedFiles[index]
                        // 从 OSS 删除文件
                        await deleteFromOSS(fileUrl)
                        // 从本地状态中移除
                        setFormData(prev => ({ 
                          ...prev, 
                          uploadedFiles: prev.uploadedFiles.filter((_, i) => i !== index) 
                        }))
                        Toast.show('删除成功')
                      } catch (error) {
                        console.error('删除文件失败:', error)
                        // 即使 OSS 删除失败，也从本地状态中移除
                        setFormData(prev => ({ 
                          ...prev, 
                          uploadedFiles: prev.uploadedFiles.filter((_, i) => i !== index) 
                        }))
                        Toast.show('删除成功')
                      }
                    }}
                  >
                    删除
                  </Button>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    )
  }

  // 步骤3：创建档案
  const PatientStep = () => {
    if (currentStep !== 3) return null
    
    const [showPatientForm, setShowPatientForm] = useState(false)
    const [patients, setPatients] = useState([
      { id: 1, name: '左马毅', relationship: '自己', gender: '女', age: 23 }
    ])
    const [selectedPatient, setSelectedPatient] = useState<any>(null)

    const handleSavePatient = (patientData: any) => {
      const newPatient = { id: Date.now(), ...patientData }
      setPatients(prev => [...prev, newPatient])
      setSelectedPatient(newPatient)
      setFormData(prev => ({ ...prev, selectedPatient: newPatient }))
      setShowPatientForm(false)
      Toast.show('档案创建成功')
    }
    
    return (
      <div className={styles.stepContent}>
        {/* 医生助手对话 */}
        <div className={styles.chatArea}>
          <div className={styles.assistantMessage}>
            <div className={styles.avatar}>
              <div className={styles.avatarPlaceholder}>👩‍⚕️</div>
            </div>
            <div className={styles.messageBubble}>
              <div className={styles.messageText}>
                请创建就诊人档案，填写年龄、性别等信息
              </div>
            </div>
          </div>
        </div>
        
        {/* 患者档案区域 */}
        <div className={styles.patientArchives}>
          <div className={styles.privacyNotice}>
            <span>🛡️</span>
            <span>真实档案有利于医生准确判断病情，将严格保障您隐私安全</span>
          </div>

          {/* 新建档案按钮 */}
          <div className={styles.createArchive} onClick={() => setShowPatientForm(true)}>
            <span>➕</span>
            <span>新建档案</span>
          </div>

          {/* 已有患者列表 */}
          {patients.map(patient => (
            <div
              key={patient.id}
              className={`${styles.patientCard} ${selectedPatient?.id === patient.id ? styles.selected : ''}`}
              onClick={() => {
                setSelectedPatient(patient)
                setFormData(prev => ({ ...prev, selectedPatient: patient }))
              }}
            >
              <div className={styles.patientInfo}>
                <div className={styles.name}>{patient.name}</div>
                <div className={styles.details}>
                  {patient.relationship} · {patient.gender} · {patient.age}岁
                </div>
              </div>
              {selectedPatient?.id === patient.id && <span>✓</span>}
            </div>
          ))}
        </div>

        {/* 底部弹出表单 */}
        <Popup
          visible={showPatientForm}
          position="bottom"
          onClose={() => setShowPatientForm(false)}
        >
          <PatientForm onSave={handleSavePatient} />
        </Popup>
      </div>
    )
  }

  // 步骤4：匹配医生
  const DoctorStep = () => {
    if (currentStep !== 4) return null
    
    return (
      <div className={styles.stepContent}>
        {/* 医生助手对话 */}
        <div className={styles.chatArea}>
          <div className={styles.assistantMessage}>
            <div className={styles.avatar}>
              <div className={styles.avatarPlaceholder}>👩‍⚕️</div>
            </div>
            <div className={styles.messageBubble}>
              <div className={styles.messageText}>
                根据您的病情描述，为您推荐以下专业医生
              </div>
            </div>
          </div>
        </div>
        
        {/* 医生选择区域 */}
        <div className={styles.doctorStep}>
          <div className={styles.userInfo}>
            <div className={styles.serviceDisclaimer}>
              <span>💡</span>
              <span>服务说明：医生将在24小时内接诊，您可随时咨询</span>
            </div>
          </div>
          
          <div className={styles.departmentMatch}>
            <div className={styles.packageSelection}>
              <div className={styles.recommendedTag}>推荐</div>
              <div className={styles.multiDoctorTip}>
                多位医生为您服务，确保快速接诊
              </div>
            </div>
          </div>
          
          <div className={styles.doctorsList}>
            {mockDoctors.map(doctor => (
              <div 
                key={doctor.id} 
                className={`${styles.doctorCard} ${formData.selectedDoctor?.id === doctor.id ? styles.selected : ''}`}
                onClick={() => setFormData(prev => ({ ...prev, selectedDoctor: doctor }))}
              >
                <div className={styles.doctorAvatar}>
                  <img src={doctor.avatar} alt={doctor.name} />
                </div>
                <div className={styles.doctorInfo}>
                  <div className={styles.doctorName}>{doctor.name}</div>
                  <div className={styles.doctorTags}>
                    <span className={styles.tag}>{doctor.department}</span>
                    <span className={styles.tag}>{doctor.title}</span>
                  </div>
                </div>
                <div className={styles.hospitalInfo}>
                  {doctor.hospital}
                  <span className={styles.hospitalTags}>
                    <span className={styles.tag}>三甲</span>
                    <span className={styles.tag}>百强医院</span>
                  </span>
                </div>
                {formData.selectedDoctor?.id === doctor.id && <span>✓</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  // 患者档案表单组件
  const PatientForm = ({ onSave }: { onSave: (data: any) => void }) => {
    const [form] = Form.useForm()
    
    const handleSubmit = () => {
      const values = form.getFieldsValue()
      onSave(values)
    }
    
    return (
      <div className={styles.patientForm}>
        <div className={styles.formHeader}>
          <span>新建档案</span>
        </div>
        <Form form={form} layout="horizontal">
          <Form.Item label="姓名" name="name">
            <Input placeholder="请输入患者姓名" />
          </Form.Item>
          <Form.Item label="与您的关系" name="relationship">
            <Selector 
              options={[
                { label: '自己', value: '自己' },
                { label: '配偶', value: '配偶' },
                { label: '子女', value: '子女' },
                { label: '父母', value: '父母' },
                { label: '其他', value: '其他' }
              ]} 
            />
          </Form.Item>
          <Form.Item label="性别" name="gender">
            <Radio.Group>
              <Radio value="男">男</Radio>
              <Radio value="女">女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="年龄" name="age">
            <Input placeholder="请输入年龄" type="number" />
          </Form.Item>
          <Form.Item label="出生日期" name="birthDate">
            <DatePicker />
          </Form.Item>
        </Form>
        <Button color="primary" onClick={handleSubmit} className={styles.saveButton}>
          保存档案
        </Button>
      </div>
    )
  }

  // 底部操作区域
  const BottomActions = () => {
    const textareaRef = useRef<HTMLTextAreaElement>(null)
    const [charCount, setCharCount] = useState(0)
    const [uploading, setUploading] = useState(false)
    
    // 监听formData变化，同步到输入框
    useEffect(() => {
      if (textareaRef.current && formData.symptomDescription) {
        textareaRef.current.value = formData.symptomDescription
        setCharCount(formData.symptomDescription.length)
      }
    }, [formData.symptomDescription])
    
    
    // 选择图片 - 支持多选和单个上传
    const handleSelectImage = () => {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.multiple = true // 允许多选
      input.onchange = async (e) => {
        const files = (e.target as HTMLInputElement).files
        if (files) {
          const fileArray = Array.from(files)
          const remainingSlots = 9 - formData.uploadedFiles.length
          const filesToUpload = fileArray.slice(0, remainingSlots)
          
          if (filesToUpload.length === 0) {
            Toast.show('最多只能上传9张图片')
            return
          }
          
          if (filesToUpload.length < fileArray.length) {
            Toast.show(`最多只能上传9张图片，已选择前${filesToUpload.length}张`)
          }
          
          // 逐个上传文件
          setUploading(true)
          try {
            const token = localStorage.getItem('token')
            if (!token) {
              Toast.show('请先登录')
              navigate('/login')
              return
            }
            
            const uploadPromises = filesToUpload.map(async (file, index) => {
              const url = await uploadToOSS(file, (progress) => {
                console.log(`文件 ${index + 1} 上传进度: ${progress}%`)
              })
              return url
            })
            
            const urls = await Promise.all(uploadPromises)
            
            setFormData(prev => ({ 
              ...prev, 
              uploadedFiles: [...prev.uploadedFiles, ...urls] 
            }))
            Toast.show(`成功上传${urls.length}张图片`)
          } catch (error) {
            console.error('上传失败:', error)
            Toast.show(`上传失败: ${error instanceof Error ? error.message : '未知错误'}`)
          } finally {
            setUploading(false)
          }
        }
      }
      input.click()
    }
    
    const handleSubmit = () => {
      // 检查所有必填项
      if (formData.symptomDescription.length < 10) {
        Toast.show('请至少输入10个字符描述病情')
        return
      }
      
      if (!formData.selectedPatient) {
        Toast.show('请选择就诊人')
        return
      }
      
      if (!formData.selectedDoctor) {
        Toast.show('请选择医生')
        return
      }
      
      // 提交问诊
      Toast.show('问诊提交成功！')
      console.log('问诊数据:', formData)
    }

    
    const isFormValid = () => {
      return formData.symptomDescription.length >= 10 && 
             formData.selectedPatient && 
             formData.selectedDoctor
    }
    
    const renderStepContent = () => {
      switch (currentStep) {
        case 1: // 描述病情
          return (
            <>
              <div className={styles.inputContainer}>
                <textarea
                  ref={textareaRef}
                  className={styles.textarea}
                  placeholder="请用10-500字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等"
                  maxLength={500}
                  onInput={(e) => {
                    const value = (e.target as HTMLTextAreaElement).value
                    setCharCount(value.length)
                  }}
                  onBlur={(e) => {
                    const value = (e.target as HTMLTextAreaElement).value
                    setFormData(prev => ({ ...prev, symptomDescription: value }))
                  }}
                />
                <Button 
                  onClick={() => {
                    if (formData.symptomDescription.length >= 10) {
                      // 保存到历史记录
                      addToHistory(formData.symptomDescription)
                      setCurrentStep(2)
                    } else {
                      Toast.show('请至少输入10个字符')
                    }
                  }}
                  color="primary"
                  className={styles.submitButton}
                >
                  发送
                </Button>
              </div>
              <div className={styles.charCount}>
                {charCount}/500
              </div>
            </>
          )
          
        case 2: // 上传图片
          return (
            <div className={styles.uploadBottomSection}>
              {/* 上传图片标题 */}
              <div className={styles.uploadTitle}>上传图片 (选填)</div>
              
              {/* 描述文字 */}
              <div className={styles.uploadDesc}>
                检查单/历史病例/患处照片(最多9张)
              </div>
              
              {/* 上传区域 */}
              <div className={styles.uploadArea}>
                <div className={styles.uploadBox} onClick={handleSelectImage}>
                  <div className={styles.uploadIcon}>{uploading ? '⏳' : '+'}</div>
                  <div className={styles.uploadText}>{uploading ? '上传中...' : '添加图片'}</div>
                </div>
                
                {/* 已上传的图片网格 */}
                {formData.uploadedFiles.length > 0 && (
                  <div className={styles.uploadedGrid}>
                    {formData.uploadedFiles.map((url, index) => (
                      <div key={index} className={styles.imageItem}>
                        <img src={url} alt={`上传图片${index + 1}`} />
                        <div 
                          className={styles.deleteBtn}
                          onClick={async () => {
                            try {
                              const fileUrl = formData.uploadedFiles[index]
                              // 从 OSS 删除文件
                              await deleteFromOSS(fileUrl)
                              // 从本地状态中移除
                              setFormData(prev => ({ 
                                ...prev, 
                                uploadedFiles: prev.uploadedFiles.filter((_, i) => i !== index) 
                              }))
                              Toast.show('删除成功')
                            } catch (error) {
                              console.error('删除文件失败:', error)
                              // 即使 OSS 删除失败，也从本地状态中移除
                              setFormData(prev => ({ 
                                ...prev, 
                                uploadedFiles: prev.uploadedFiles.filter((_, i) => i !== index) 
                              }))
                              Toast.show('删除成功')
                            }
                          }}
                        >
                          ×
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              
              {/* 拍摄指南 */}
              <div className={styles.guideLink}>
                如何正确拍摄清晰照片? 查看指南 &gt;&gt;
              </div>
              
              {/* 跳过和确定按钮 */}
              <div className={styles.uploadActions}>
                <Button 
                  onClick={() => setCurrentStep(3)}
                  className={styles.skipButton}
                  fill="outline"
                >
                  跳过
                </Button>
                <Button 
                  onClick={() => setCurrentStep(3)}
                  color="primary"
                  className={styles.confirmButton}
                >
                  确定
                </Button>
              </div>
            </div>
          )
          
        case 3: // 创建档案
          return (
            <div className={styles.stepActions}>
              <Button 
                onClick={() => setCurrentStep(4)}
                color="primary"
                disabled={!formData.selectedPatient}
                className={styles.nextButton}
              >
                下一步
              </Button>
            </div>
          )
          
        case 4: // 匹配医生
          return (
            <div className={styles.stepActions}>
              <Button 
                onClick={handleSubmit}
                color="primary"
                disabled={!isFormValid()}
                className={styles.submitButton}
              >
                提交问诊
              </Button>
            </div>
          )
          
        default:
          return null
      }
    }
    
    return (
      <div className={styles.bottomActions}>
        {renderStepContent()}
      </div>
    )
  }

  return (
    <div className={styles.consultationPage}>
      {/* 顶部导航栏 */}
      <NavBar onBack={() => navigate(-1)}>快速问诊</NavBar>
      
      {/* 步骤条 */}
      <StepBar />
      
      {/* 步骤内容区域 - 所有步骤同时显示 */}
      <div className={styles.stepContainer}>
        <SymptomStep />
        <UploadStep />
        <PatientStep />
        <DoctorStep />
      </div>
      
      {/* 底部操作区域 - 固定在底部 */}
      <BottomActions />
    </div>
  )
}

export default Index